<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock{
            width: 600px;
            height: 600px;
            background-image: url("./clock.jpg");
            margin: auto;
            position: relative;
        }
        .clock img{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        #second{
            transform: translateX(-50%) rotate(56deg);
        }
    </style>
</head>
<body>
    <div class="clock">
        <img id="hour" src="./hour.png" alt="">
        <img id="minute" src="./minute.png" alt="">
        <img id="second" src="./second.png" alt="">
    </div>

    <script>
        let hour=document.getElementById("hour");
        let minute=document.getElementById("minute");
        let second=document.getElementById("second");

        setInterval(function(){
            let time=new Date();//日期时间对象
            let h=time.getHours();
            let m=time.getMinutes();
            let s=time.getSeconds();
            console.log(h,m,s);
            second.style.transform=`translateX(-50%) rotate(${s*6}deg)`;
            minute.style.transform=`translateX(-50%) rotate(${m*6}deg)`;
            hour.style.transform=`translateX(-50%) rotate(${((h-12)+m/60)*30}deg)`;

        },1000);


    </script>
</body>
</html>